<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购买</title>
    <link rel="stylesheet" type="text/css" href="buy.css">
    <script src="jQuery/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="top">
       <div style="width: 980px;">
            <a class="biaoti" href="homepage.php">宇宙音乐</a>
            <a class="suoyin">评论</a>
            <a class="suoyin">合作</a>
            <a class="suoyin">客服</a>
            <a class="suoyin" href="buy.php">我的购买</a>
            <a class="denglu" style="color: rgb(0, 204, 255);" href="user.php">欢迎用户</a>
        </div>
    </div>
    <div class="middle">
        <p style="color: grey;">所有产品 > 我的购买</p>
        <p style="font-size: 35px;">我的购买</p>
        <hr style="color: white;">
        <ul class="liebiao">
            <li>
                <div class="shangpin">
                    <img src="img/周杰伦/周杰伦1.jpeg">
                    <div class="wenben">
                        <p style="font-size: 35px;">周杰伦</p>
                        <p style="color: grey;">单价:￥50</p>
                        <p>
                            数量:
                            <button class="jia">+</button>
                            <a>1</a>
                            <button class="jian">-</button>
                        </p>
                        <p>总计:￥50</p>
                        <p>确认购买:<input type="checkbox" onclick="jie()"></p>
                        <p><button class="shanchu">删除</button></p>
                    </div>
                </div>
                <div class="shangpin">
                    <img src="img/汪峰/汪峰1.jpeg">
                    <div class="wenben">
                        <p style="font-size: 35px;">汪峰</p>
                        <p style="color: grey;">单价:￥60</p>
                        <p>
                            数量:
                            <button class="jia">+</button>
                            <a>1</a>
                            <button class="jian">-</button>
                        </p>
                        <p>总计:￥60</p>
                        <p>确认购买:<input type="checkbox" onclick="jie()"></p>
                        <p><button class="shanchu">删除</button></p>
                    </div>
                </div>
                <div class="shangpin">
                    <img src="img/陈奕迅/陈奕迅1.jpeg">
                    <div class="wenben">
                        <p style="font-size: 35px;">陈奕迅</p>
                        <p style="color: grey;">单价:￥70</p>
                        <p>
                            数量:
                            <button class="jia">+</button>
                            <a>1</a>
                            <button class="jian">-</button>
                        </p>
                        <p>总计:￥70</p>
                        <p>确认购买:<input type="checkbox" onclick="jie()"></p>
                        <p><button class="shanchu">删除</button></p>
                    </div>
                </div>
                <div class="shangpin">
                    <img src="img/朴树/朴树1.jpeg">
                    <div class="wenben">
                        <p style="font-size: 35px;">朴树</p>
                        <p style="color: grey;">单价:￥80</p>
                        <p>
                            数量:
                            <button class="jia">+</button>
                            <a>1</a>
                            <button class="jian">-</button>
                        </p>
                        <p>总计:￥80</p>
                        <p>确认购买:<input type="checkbox" onclick="jie()"></p>
                        <p><button class="shanchu">删除</button></p>
                    </div>
                </div>
            </li>
            <li>无更多商品</li>
        </ul>
    </div>
    <div class="middle2">
        <p id="end">合计:￥0</p>
        <button onclick="zhifu()">支付</button>
    </div>
    <div class="bottom">
        <p>
            <a>MUSIC</a> 树立版权意识，支持正版音乐！
        </p>
        <hr><br>
        <p>关于 宇宙音乐\推广合作请联系电子邮箱：2333333333@google.com</p>
    </div>
    <div class="fukuan">
        <img src="img/二维码.png" style="width: 400px;">
        <a id="ma_jia" style="color: black;"></a><br/>
        <button onclick="guanbi()">关闭</button>
    </div>
</body>

<script>
    //初始化我的购买
    window.onload = function() {
        let denglu = localStorage.getItem("登录");
        if (denglu == "0") {
            window.location.href = "login.php";
        }
        let ying = localStorage.getItem("周杰伦");
        let zhi = localStorage.getItem("汪峰");
        let Nier = localStorage.getItem("陈奕迅");
        let huang = localStorage.getItem("朴树");
        var shang = document.getElementsByClassName("shangpin");
        if (ying == "1") {
            $(shang[0]).css("display", "block");
        } else {
            $(shang[0]).css("display", "none");
        }
        if (zhi == "1") {
            $(shang[1]).css("display", "block");
        } else {
            $(shang[1]).css("display", "none");
        }
        if (Nier == "1") {
            $(shang[2]).css("display", "block");
        } else {
            $(shang[2]).css("display", "none");
        }
        if (huang == "1") {
            $(shang[3]).css("display", "block");
        } else {
            $(shang[3]).css("display", "none");
        }
        let a = localStorage.getItem("用户名");
        document.getElementsByTagName("a")[6].innerText = "欢迎用户:" + a;
    };
    //增加数量
    var jia = document.getElementsByClassName("jia")
    for (var i = 0; i < jia.length; i++) {
        jia[i].addEventListener("click", function() {
            var number = $(this).parent().children("a")[0]
            var new_number = parseInt(number.innerText) + 1
            number.innerText = new_number;
            var dan = parseInt($(this).parent().parent().children("p")[1].innerText.substr(4))
            var zong = $(this).parent().parent().children("p")[3]
            zong.innerText = "总计:￥" + dan * new_number
            jie();
        })
    }
    //减少数量
    var jian = document.getElementsByClassName("jian")
    for (var i = 0; i < jian.length; i++) {
        jian[i].addEventListener("click", function() {
            var number = $(this).parent().children("a")[0]
            var new_number = parseInt(number.innerText) - 1;
            if (new_number < 0) {
                new_number = 0;
            }
            number.innerText = new_number;
            var dan = parseInt($(this).parent().parent().children("p")[1].innerText.substr(4))
            var zong = $(this).parent().parent().children("p")[3]
            zong.innerText = "总计:￥" + dan * new_number
            jie();
        })
    }
    //删除
    var shanchu = document.getElementsByClassName("shanchu");
    for (var i = 0; i < shanchu.length; i++) {
        shanchu[i].addEventListener("click", function() {
            var dui = document.getElementsByTagName("input");
            for (var j = 0; j < dui.length; j++) {
                dui[j].checked = false;
            }
            var a = $(this).parents("div.shangpin").css("display", "none");
            jie();
        })
    }
    //结算总价格
    function jie() {
        var all_shang = document.getElementsByClassName("wenben");
        var jiesuan = 0;
        for (var i = 0; i < all_shang.length; i++) {
            var xuan = $(all_shang[i]).children()[4].children
            if ($(xuan).is(":checked")) {
                jiesuan = parseFloat(jiesuan) + parseFloat($(all_shang[i]).children()[3].innerText.substr(4))
            }
        }
        var end = document.getElementById("end");
        end.innerText = "合计:￥" + jiesuan;
        return jiesuan;
    }
    //刷新时修改下次显示的商品
    window.onbeforeunload = function() {
        var shang = document.getElementsByClassName("shangpin");
        if ($(shang[0]).css("display") == "none") {
            localStorage.setItem("周杰伦", "0");
        }
        if ($(shang[1]).css("display") == "none") {
            localStorage.setItem("汪峰", "0");
        }
        if ($(shang[2]).css("display") == "none") {
            localStorage.setItem("陈奕迅", "0");
        }
        if ($(shang[3]).css("display") == "none") {
            localStorage.setItem("朴树", "0");
        }
    };
    //支付
    function zhifu() {
        var a = document.getElementsByClassName("fukuan");
        $(a).css("display", "block");
        document.getElementById("ma_jia").innerText = "合计:￥" + jie() + " 请支付";
        console.log(document.getElementById("ma_jia").innerText)
    };

    function guanbi() {
        var a = document.getElementsByClassName("fukuan");
        $(a).css("display", "none");
    };
</script>

</html>